<template>
  <!-- 书写html结构 -->

  <div>
    <!-- 头部刷新 -->
    <div style="z-index: 1">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 粘性布局 -->
        <van-sticky>
          <!-- 导航栏 -->
          <van-nav-bar
            title="门店详情"
            left-text="返回"
            left-arrow
            @click-left="returnTo"></van-nav-bar>
          <!-- 标题 -->
        </van-sticky>

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in images">
            <img
              :src="item.url"
              style="height: 402px; width: 100%; border-radius: 7px" />
          </van-swipe-item>
        </van-swipe>
        <!-- 中间的空白部分 -->
        <van-row style="height: 8px; background-color: #ffffff">
          <van-col span="5"> </van-col>
          <van-col span="1"></van-col>
          <van-col span="9"></van-col>
          <van-col span="1"></van-col>
          <van-col span="4"></van-col>
          <van-col span="4"></van-col>
        </van-row>

        <van-row style="margin-top: 3px">
          <van-col span="5"> {{ weather.storeName }}</van-col>
          <van-col span="11"></van-col>
          <van-col span="8">
            <a
              @click="jump('Merchant')"
              style="
                text-decoration: none;
                font-weight: bold;
                font-size: 18px;
                color: deepskyblue;
              "
              >工商登记信息</a
            >
          </van-col>
        </van-row>
        <van-row style="margin-top: 15px">
          <van-col style="text-align: left; margin-left: 6px" span="24"
            ><van-icon name="location-o" color="blue" />{{
              weather.address
            }}</van-col
          >
        </van-row>
        <hr />
        <van-row style="margin-top: 3px">
          <van-col span="8"> 营业时间 24小时 </van-col>
          <van-col span="8"></van-col>
          <van-col
            style="color: aqua; font-weight: bold; font-size: 18px"
            span="8">
            <!-- to="index" 路由跳转 -->
            <van-button type="default" style="height: 24px" to="fault"
              >申报故障</van-button
            >
          </van-col>
        </van-row>
        <van-row style="margin-top: 15px">
          <van-col style="text-align: left; margin-left: 10px" span="24"
            >门店评分&nbsp;<van-rate v-model="weather.country" readonly />
          </van-col>
        </van-row>

        <hr />

        <van-row style="margin-top: 3px">
          <van-col span="5"> 洗车工位 </van-col>
          <van-col span="13"></van-col>
          <van-col span="6">
            <!-- 导航栏 -->
            <a
              style="text-decoration: none; color: deepskyblue"
              @click="jumpId('alllibaray', num)"
              >查看全部</a
            >
            <van-icon name="arrow" color="blue" />
          </van-col>
        </van-row>

        <van-row>
          <van-col span="15">
            <van-card
              v-for="item in databaseName"
              v-if="0 == item.idle"
              price="可立即洗车"
              :title="item.stationName"
              currency=""
              :thumb="item.picture"
              style="text-align: left; font-size: 15p"
              @click="loadwash(item.stationName, item.stationId)">
              <template #tags>
                <br />
                <div>
                  <div
                    style="
                      width: 50px;
                      height: 18px;
                      text-align: center;
                      line-height: 18px;
                      color: black;
                      background-color: #38ac83;
                      float: left;
                      margin-left: 5px;
                    ">
                    空闲中
                  </div>
                </div>
                <br />
              </template>
            </van-card>

            <van-card
              v-for="item in databaseName"
              v-if="1 == item.idle"
              price="需要等待"
              :title="item.stationName"
              currency=""
              :thumb="item.picture"
              style="text-align: left; font-size: 15p"
              @click="loadwash(item.stationName, item.stationId)">
              <template #tags>
                <br />
                <div>
                  <div
                    style="
                      width: 50px;
                      height: 18px;
                      text-align: center;
                      line-height: 18px;
                      color: white;
                      background-color: #ffa738;
                      float: left;
                      margin-left: 5px;
                    ">
                    正在使用
                  </div>
                </div>
                <br />
              </template>
            </van-card>
          </van-col>
          <van-col span="9" style="text-align: right">
            <div
              style="z-index: 2; text-align: right; margin-right: 2px"
              @click="
                jumpAdd(
                  'Selectlicenseplate',
                  personal.id,
                  personal.smallname,
                  personal.account,
                  weather.storeName,
                  weather.storeId
                )
              ">
              <van-sticky :offset-top="630">
                <svg
                  t="1686395134547"
                  class="icon"
                  viewBox="0 0 1029 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4217"
                  width="60"
                  height="60">
                  <path
                    d="M936.228571 380.342857h-7.314285l65.828571 80.457143v365.714286c0 29.257143-29.257143 51.2-58.514286 51.2h-117.028571c-29.257143 0-58.514286-21.942857-58.514286-51.2v-80.457143h-512v80.457143c0 29.257143-29.257143 51.2-58.514285 51.2H87.771429c-29.257143 0-58.514286-21.942857-58.514286-51.2v-365.714286l80.457143-80.457143h-21.942857c-21.942857 21.942857-51.2 14.628571-73.142858-7.314286s-14.628571-51.2 7.314286-73.142857c21.942857-14.628571 51.2-14.628571 65.828572 0 29.257143 0 51.2 7.314286 73.142857 21.942857L256 219.428571h541.257143L877.714286 314.514286c21.942857-7.314286 43.885714-14.628571 65.828571-14.628572 21.942857-21.942857 51.2-14.628571 73.142857 7.314286s14.628571 51.2-7.314285 73.142857c-21.942857 14.628571-51.2 14.628571-73.142858 0z m-826.514285 146.285714c-29.257143 36.571429-21.942857 87.771429 14.628571 109.714286 36.571429 21.942857 87.771429 14.628571 117.028572-21.942857 21.942857-36.571429 14.628571-87.771429-21.942858-109.714286-14.628571-7.314286-29.257143-14.628571-43.885714-14.628571-29.257143-7.314286-58.514286 7.314286-65.828571 36.571428z m636.342857-256h-438.857143L197.485714 402.285714h650.971429l-102.4-131.657143z m21.942857 256c-21.942857 36.571429-14.628571 87.771429 21.942857 109.714286 36.571429 21.942857 87.771429 14.628571 109.714286-21.942857 21.942857-36.571429 14.628571-87.771429-21.942857-109.714286-14.628571-7.314286-29.257143-14.628571-43.885715-14.628571-29.257143-7.314286-58.514286 7.314286-65.828571 36.571428z"
                    fill="#0197D1"
                    p-id="4218"></path>
                </svg>
              </van-sticky>
            </div>
          </van-col>
        </van-row>

        <hr />
        <van-row style="margin-top: 3px; height: 36px; line-height: 36px">
          <van-col span="5"> 门店商品</van-col>
          <van-col span="13"></van-col>
          <van-col span="6">
            <!-- 导航栏 -->
            <a
              @click="shop(weather)"
              style="text-decoration: none; color: deepskyblue"
              >查看全部</a
            >
            <van-icon name="arrow" color="blue" />
          </van-col>
        </van-row>
        <van-row> </van-row>
        <hr />
        <van-row style="margin-top: 3px; height: 36px; line-height: 36px">
          <van-col span="5"> 门店评价</van-col>
          <van-col span="13"></van-col>
          <van-col span="6">
            <!-- 导航栏 -->
            <a
              @click="queryStore()"
              style="text-decoration: none; color: deepskyblue"
              >查看全部</a
            >
            <van-icon name="arrow" color="blue" />
          </van-col>
        </van-row>

        <hr />
        <van-row style="margin-top: 3px">
          <van-col span="8" style="text-align: left; margin-left: 10px">
            客流量分析
          </van-col>
          <van-col span="8"></van-col>
          <van-col
            style="color: aqua; font-weight: bold; font-size: 18px"
            span="8">
          </van-col>
        </van-row>
        <van-row style="margin-top: 15px">
          <van-col style="text-align: left; margin-left: 10px" span="24">
            避开洗车高峰，无需排队，减少碳排放
          </van-col>
        </van-row>
        <div style="height: 300px; text-align: center; line-height: 300px">
          <div id="chart-container" style="width: 300px; height: 300px"></div>
        </div>

        <van-row style="height: 36px; background-color: #ffffff">
          <van-col span="5"> </van-col>
          <van-col span="1"></van-col>
          <van-col span="9"></van-col>
          <van-col span="1"></van-col>
          <van-col span="4"></van-col>
          <van-col span="4"></van-col>
        </van-row>
        <!-- 底部标签 -->

        <van-tabbar v-model="active">
          <van-tabbar-item @click="Dialog" icon="phone-o"
            >联系店主</van-tabbar-item
          >
          <van-button round type="info" @click="goPay(weather.storeId)"
            >前往充值
          </van-button>
          <van-tabbar-item
            icon="guide-o"
            @click="jumpMap('map', weather.address)"
            >一键导航</van-tabbar-item
          >
        </van-tabbar>
      </van-pull-refresh>
    </div>
    <van-popup
      v-model="popupVisible"
      position="bottom"
      :style="{ height: '42%' }">
      <van-radio-group v-model="selectedOption">
        <van-radio
          v-for="option in options"
          :name="option.carNo"
          style="margin-top: 3%">
          {{ option.carNo }}
        </van-radio>
      </van-radio-group>
      <van-button type="primary" @click="submit" style="margin-top: 1%"
        >确定</van-button
      >
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import axios from "axios";
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      databaseName: [],
      num: this.$route.query.id,
      aaa: 2,
      scorevalue: 3.5, //门店评分
      weather: {},
      isLoading: false, //刷新参数
      active: "aaa", //底部标签绑定
      images: [
        //轮播图
        // "https://img0.baidu.com/it/u=3425868493,3104015061&fm=253&fmt=auto&app=120&f=JPEG?w=1199&h=800",
        // "https://img0.baidu.com/it/u=4162443464,2854908495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      ],
      messagetotal: 100, //主页左上角铃铛信息数量
      total: 100, //主页全部商家
      personal: {},

      popupVisible: false,
      selectedOption: "",
      options: [],
      carId: "",
      storeId: "",
      userId: "",
      amount: "",
      stationName: "",
      stationId: "",
    };
  },
  created() {
    this.loadData();
    this.loadStar();
    this.loadImage();
    this.loadUser();
    this.getDailyCheckoutStatistics(); //统计图
    //生命周期  创建后要做的事情  vue被创建时候执行的
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    //判断是否有评论
    queryStore() {
      //查询门店
      var _this = this;
      console.log("。。。。。");
      this.$http
        .get(
          "/tbGoodsComment/queryStore?storeId=" +
            this.num +
            "&score=" +
            0 +
            "&isimage=" +''
        )
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            if (response.data.data.length == 0) {
              Toast("没有评论")
            } else {
              _this.$router.push({name:'evaluate',query:{storeId:_this.num}})
            }
          }
        })
        .catch(function (error) {
          _this.$toast("获取商品评价信息时出错");
        });
    },

    loadwash(stationName, stationId) {
      //没有绑定该门店
      Dialog.confirm({
        title: "提示",
        message: "是否开始洗车",
      })
        .then(() => {
          //不是直接使用axios 而是使用$http
          //baseURL="http://localhost:8080"
          var _this = this;
          this.$http
            .get("/car/queryStore?storeId=" + this.$route.query.id)
            .then(function (response) {
              console.log(response);
              if (response.data.code == 200) {
                if (response.data.data.length == 0) {
                  Toast("该门店未绑定车牌");
                } else {
                  _this.options = response.data.data;
                  _this.stationName = stationName;
                  _this.stationId = stationId;
                  _this.testku();
                }
                //this不可以直接使用 代表的是axios对象
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(() => {
          Toast("已取消");
        });
    },
    submit() {
      // 处理提交逻辑，selectedOption为选中的选项值
      console.log(this.selectedOption);
      this.popupVisible = false;
      this.carNostore(this.selectedOption);
    },

    //检验该库是否正在被使用
    testku() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get(
          "/tbStation/queryStoreName?storeId=" +
            this.$route.query.id +
            "&storeName=" +
            this.stationName
        )
        .then(function (response) {
          console.log(response);
          if (response.data[0].idle == 1) {
            Toast("该库正在被使用请等待");
          } else {
            _this.popupVisible = true;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //根据车牌查询
    carNostore(carNo) {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .post("/tbStore/storeUserCarId?carNo=" + carNo)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.carId = response.data.data[0].carId;
            _this.storeId = response.data.data[0].storeId;
            _this.userId = response.data.data[0].userId;
            _this.queryUserAndStore();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 查询是否有余额
    queryUserAndStore() {
      var _this = this;
      console.log("根据token查询当前登录用户信息。。。。。");
      this.$http
        .get(
          "/balance/queryUserAndStore?userId=" +
            this.userId +
            "&storeId=" +
            this.storeId
        )
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.amount = response.data.data.amount;
            if (_this.amount == 0) {
              Toast("余额为" + _this.amount + "元,请充值");

              setTimeout(function () {
                _this.$router.push({
                  path: "/Payment",
                  query: { storeId: _this.storeId },
                });
              }, 2000); // 定时时间
            } else {
              //开始洗车
              _this.beginwash();
            }
          }
        })
        .catch(function (error) {
          _this.$toast("余额不足请点击下方充值");
        });
    },
    //开始洗车
    beginwash() {
      var _this = this;
      this.$http
        .post(
          "/checkoutInfo/addCar?userId=" +
            this.userId +
            "&carId=" +
            this.carId +
            "&storeId=" +
            this.storeId +
            "&stationName=" +
            this.stationName +
            "&stationId=" +
            this.stationId
        )
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            Toast("开始洗车");
            setTimeout(function () {
              _this.$router.push("/");
            }, 1000); // 定时时间
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    loadUser() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get("/tuser/queryBy")
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            // alert(JSON.stringify(response.data.data))
            _this.personal = response.data.data;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    loadData() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get("/tbStore/queryById?id=" + this.$route.query.id)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.weather = response.data.data[0];
            // alert(JSON.stringify(_this.weather))
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    loadStar() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .post("/tbStation/queryAllStore", {
          pageNo: 1,
          pageSize: 2,
          data: { storeId: this.$route.query.id },
        })
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.databaseName = response.data.data.records;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //获取轮播图
    loadImage() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .post("/tbImage/queryAllStore", {
          pageNo: 1,
          pageSize: 2,
          data: { shopId: this.$route.query.id },
        })
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.images = response.data.data.records;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //6，跳转充值页
    goPay(storeId) {
      var _this = this;
      //7，判断该门店有没有被绑定
      this.$http
        .get("/userAndStore/selectByStoreIdAndUserId?storeId=" + storeId)
        .then(function (response) {
          console.log("判断该门店有没有被绑定。。。。。");
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            if (response.data.data.length <= 0) {
              //没有绑定该门店
              Dialog.confirm({
                title: "提示",
                message: "您暂未和店铺绑定，是否绑定当前店铺",
              })
                .then(() => {
                  //2,绑定该门店
                  _this.$http
                    .post("/userAndStore/add?storeId=" + _this.num)
                    .then(function (response) {
                      console.log("绑定该门店。。。。。");
                      console.log(JSON.stringify(response));
                      //alert(JSON.stringify(response.data.data));
                      if (response.data.code == 200) {
                        _this.$toast("绑定成功");
                        //已经和该门店绑定过了，直接跳转充值页面
                        _this.$router.push({
                          path: "/payment",
                          query: { storeId: storeId },
                        });
                      }
                    })
                    .catch(function (error) {
                      _this.$toast("出错了。。。");
                    });
                })
                .catch(() => {
                  // on cancel
                });
            } else {
              //已经和该门店绑定过了，直接跳转充值页面
              _this.$router.push({
                path: "/payment",
                query: { storeId: storeId },
              });
            }
          }
        })
        .catch(function (error) {
          _this.$toast("出错了。。。");
        });
    },

    //  提示弹出框
    TipDialog() {
      this.$dialog
        .alert({
          // title:'标题呀',
          message: "弹框内容",
        })
        .then(() => {
          console.log("点击了确认");
        });
    },

    //（确认、取消）的弹出框
    Dialog() {
      this.$dialog
        .confirm({
          title: "提示",
          message: this.weather.phone,
          confirmButtonColor: "red",
        })
        .then(() => {
          console.log("点击了确认");
        })
        .catch(() => {
          console.log("点击了取消");
        });
    },
    returnTo() {
      this.$router.go(-1);
    },
    jumpId(uri, id) {
      this.$router.push({ name: uri, query: { id: id } });
    },
    jumpAdd(uri, id, smala, pho, storeName, storeId) {
      this.$router.push({
        name: uri,
        query: {
          id: id,
          smala: smala,
          pho: pho,
          storeName: storeName,
          storeId: storeId,
        },
      });
    },
    //5，跳转商店商品页面
    shop(store) {
      this.$router.push({
        path: "/storeCheck",
        query: { data: JSON.stringify(store) },
      });
      //Toast("暂时没有其他商品");
    },
    jumpMap(uri, address) {
      this.$router.push({ name: uri, query: { address: address } });
    },
    //  方法事件处理
    //刷新方法
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        //调用请求
      }, 1000);
    },
    jump(uri) {
      this.$router.push(uri);
    },

    getDailyCheckoutStatistics() {
      axios
        .get("/checkoutInfo/getCheckoutStatisticsId?storeId=" + this.num)
        .then((response) => {
          const data = response.data;
          this.renderChart(data);
        })
        .catch((error) => {
          console.error(error);
        });
    },

    renderChart(data) {
      const chartContainer = document.getElementById("chart-container");
      const myChart = this.$echarts.init(chartContainer);

      const xAxisData = data.map((item) => item.date);
      const seriesData = data.map((item) => item.count);
      const options = {
        title: {
          text: "每日店铺洗车统计",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "axis", //当鼠标放到数据条的轴上，数据内容就会显示
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            rotate: 45,
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
          name: "洗车次数",
        },
        series: [
          {
            name: "洗车次数",
            type: "line",
            data: seriesData,
          },
        ],
      };

      myChart.setOption(options);
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>

<style scoped>
#chart-container {
  margin: 20px auto;
}
.btn {
  margin: 20px;
}
/* 轮播图样式 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 402px;
  border-radius: 10px;
}
.imgcolor {
  /* width: 100px; */
  height: 120px;
}
.imgfor {
  width: 100%;
  height: 100%;
}
.min1 {
  width: 50px;
  height: 15px;
  color: #fff;
  background-color: #39a9ed;
  float: left;
}
.min2 {
  width: 50px;
  height: 15px;
  color: #fff;
  background-color: #38ac83;
  float: left;
  margin-left: 5px;
}
.min {
  height: 23px;
  color: #fff;
  background-color: #39a9ed;
  margin-top: 8px;
  width: fit-content;
}
</style>
